<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <!-- build:css /static/lib/list.min.css -->
    <link href="/static/lib/css/mui.css" rel="stylesheet"/>
    <!-- endbuild -->
    <!-- build:css /static/components/list.min.css -->
    <link href="/static/components/css/iconfont.css" rel="stylesheet" type="text/css"/>
    <link href="/static/components/css/hot.css" rel="stylesheet" type="text/css"/>
    <!-- endbuild -->
</head>

<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" href="{{ url_for('home.index') }}"></a>
    <h1 class="mui-title">全部游戏</h1>
</header>
<div id="pullrefresh" class="mui-content mui-scroll-wrapper" class="maincon">
    <div class="mui-scroll">
        <ul id="hot_ul" class="mui-table-view">
        </ul>
    </div>
</div>


<!-- build:js /static/js/list.min.js -->
<script src="/static/lib/js/mui.min.js"></script>
<script src="/static/lib/js/jquery.js" type="text/javascript"></script>
<script src="/static/components/js/util.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/components/js/allgame.js" type="text/javascript" charset="utf-8"></script>
<!-- endbuild -->
<script src="/static/components/js/ag.js" type="text/javascript"></script>

<script type="text/javascript">
    var base_url = '{{ g.api_url }}';

    var channel_code = '{{ g.channel_code }}';

    loadingAnalyze('{{ g.analyze_url }}');

    (function () {
        //上拉加载下拉刷新
        mui.init({
            pullRefresh: {
                container: '#pullrefresh',
                up: {
                    contentrefresh: '正在加载...',
                    callback: pullupRefresh
                }
            }
        });

        var pageIndex = 3; //计数器
        var flag = false; //表示不够5条了，说明没有数据了

        function pullupRefresh() {
            //第一次加载后没有10条表示没有数据了
            var oUl = document.getElementById('hot_ul');
            if (oUl.children.length < 10) {
                mui('#pullrefresh').pullRefresh().endPullupToRefresh(true); //参数为true代表没有更多数据了。
                return;
            }
            request(base_url + '/game/member/game/channel/' + channel_code, {
                "type": "map",
                "content": {
                    "page": pageIndex++,
                    "per_page": "5"
                }
            }).done(function (data) {
                dealHotGameList(appfilter(data,isIOSClient()));
                if (data.items.length < 5) {
                    flag = true;
                    mui('#pullrefresh').pullRefresh().endPullupToRefresh(flag); //参数为true代表没有更多数据了。
                }
                mui('#pullrefresh').pullRefresh().endPullupToRefresh(flag); //参数为true代表没有更多数据了。

            })
                    .fail(function () {
                        console.log('dealHotGameList error');
                    });
        }
    })();

    function dealHotGameList(json) {
        var oUl = document.getElementById('hot_ul');

        for (var hotgame_list_num = 0; hotgame_list_num < json.items.length; hotgame_list_num++) {
            var newli = document.createElement('li');
            newli.className = 'mui-table-view-cell mui-media';
            /*获取星星显示的span*/
            var starSpan = '';
            var score_avg = json.items[hotgame_list_num].score_avg == null ? '5.0' : json.items[hotgame_list_num].score_avg; //分数
            var score_avg_x10 = score_avg * 10;
            var score_avg_x10_ = score_avg_x10 % 10;
            if (score_avg_x10_ > 0 && score_avg_x10_ <= 5) {
                needHalfStar = true;
            } else {
                needHalfStar = false;
            }
            //							alert(needHalfStar);
            for (var home_hotgame_starnum = 0; home_hotgame_starnum < 5; home_hotgame_starnum++) {
                if (home_hotgame_starnum < parseInt(score_avg)) {
                    starSpan += '<span class="iconfont icon-xing1"></span>';
                } else {
                    if (home_hotgame_starnum == parseInt(score_avg) && needHalfStar) {
                        starSpan += '<span class="iconfont icon-ban_xing2"></span>';
                    } else {
                        if (home_hotgame_starnum == parseInt(score_avg) && score_avg_x10_ > 5) {
                            starSpan += '<span class="iconfont icon-xing1"></span>';
                        } else {
                            starSpan += '<span class="iconfont icon-xingxing"></span>';
                        }
                    }
                }
            }

            //有颜色的tag
            var all_tag_span = '';
            var colors = ["#7cc9ff", "#ff9999", "#4cac47", "#ff01c0", "#b057ca", "#ffae00"];
            for (var colorsnum = 0; colorsnum < json.items[hotgame_list_num].categories.length; colorsnum++) {
                var n = Math.floor(Math.random() * colors.length + 1) - 1;
                var span = document.createElement('span');
                span.className = 'tag_flag';
                span.style.color = colors[n];
                span.style.borderStyle = "solid ";
                span.style.borderWidth = "1px ";
                span.style.borderColor = colors[n];
                span.innerText = json.items[hotgame_list_num].categories[colorsnum].name;
                all_tag_span += span.outerHTML;
            }

            var tmpHtml = '<a href="javascript:;"><img class="mui-media-object mui-pull-left" src="' +
                    json.items[hotgame_list_num].icon + //图片地址
                    '"><div class="mui-media-body main_title">' +
                    json.items[hotgame_list_num].game_name + //主标题
                    '-<span class="allgame_column_title_tail">' +
                    json.items[hotgame_list_num].game_title + //副标题
                    '</span></div><div class="mui-media-body"><div style="display: inline;">' +
                    starSpan + //星星
                    '<span class="final_score">&nbsp;&nbsp;' +
                    formateFixedOne(score_avg) + //分数
                    '</span></div><span class="mui-pull-right iconfont icon-xiazai hot_download button_download" data_android_link="' +
                    getRealLink(json.items[hotgame_list_num].channel_game.android_link,json.items[hotgame_list_num].android_link) + //安卓链接
                    '" data_ios_link ="' +
                    getRealLink(json.items[hotgame_list_num].channel_game.ios_link,json.items[hotgame_list_num].ios_link) + //IOS链接
                    '" data-code ="' +
                    json.items[hotgame_list_num].code + //data-code
                    '" data-id ="' +
                    localStorage.getItem('user_id') + //data-code
                    '">下载</span></div><div class="mui-media-body mui-ellipsis">' +
                    all_tag_span + //类型
                    '</div></a>';

            newli.innerHTML = tmpHtml;
            newli.id = json.items[hotgame_list_num].id;
            oUl.appendChild(newli);
        }
    }

</script>

<script type="text/javascript">
    window.onload = function () {
        request(base_url + '/game/member/game/channel/' + channel_code, {
            "type": "map",
            "content": {
                "per_page": "10" //第一次加载10条
            }
        }).done(function (data) {
            dealHotGameList(appfilter(data,isIOSClient()));
        })
                .fail(function () {
                    console.log('dealHotGameList error');
                });


        function initClick() {

            mui('#hot_ul').on('tap', 'li', function () {
                {#                window.name = this.id;#}
                window.location.href = '{{ url_for('home.game_detail', game_id='') }}' + this.id;
                return false;
            });
            mui('#hot_ul').on('tap', '.button_download', function () {
                download(this, isIOSClient(), this.getAttribute('data_ios_link'), this.getAttribute('data_android_link'));
                return false;
            });
        }

        initClick();
    }
</script>

</body>

</html>